<template>
  <basic-container>
    <div style="display: flex">
      <div style="width: 50%">
        <div style="display: flex;height: 30px"></div><avue-form  ref="form"
                                           v-model="obj"
                                           :option="option">
        <template slot="table" slot-scope="scope">
          <avue-crud :option="materialOption"
                     :data="data"
                     @on-load="onLoad"
                     :page.sync="page"
                     :table-loading="loading"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     @refresh-change="refreshChange">
          </avue-crud>
        </template>

      </avue-form></div>
      <div style="width: 50%;">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="历史版本" name="1">
            <div style="display: flex;height:auto;flex-flow: wrap;">
            <div v-for="item in banbenghao" style="padding-left: 15px;padding-bottom:15px">
              <el-button size="mini" @click="banbengh(item)" round >版本{{item.taskversion}}</el-button>
            </div>
            </div>
          </el-collapse-item>
        </el-collapse>

        <avue-form  ref="form2"
                                           v-model="obj2"
                                           :option="option2">
        <template slot="table" slot-scope="scope">
          <avue-crud :option="materialOption"
                     :data="data"
                     @on-load="onLoad"
                     :page.sync="page"
                     :table-loading="loading"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     @refresh-change="refreshChange">
          </avue-crud>
        </template>

      </avue-form></div>
    </div>
  </basic-container>
</template>

<script>
import {optionGuideHistory1,optionGuideHistory2} from "@/option/acceptance/serviceItem";
import {materialHistoryPage} from "@/api/acceptance/taskgeneralbasicHistory";
import {mapGetters} from "vuex";

export default {
  name: "service-guide",
  components: {},
  data() {
    return {
      activeNames: ['1'],
      tabOtion:{
        column:[]
      },
      banbenghao:[],
      obj: {},
      obj2: {},
      option: optionGuideHistory1,
      option2: optionGuideHistory2,
      //材料
      materialOption: {
        border: true,
        wight:500,
        index: true,
        indexLabel: "序号",
        viewBtn: false,
        simplePage: true,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        refreshBtn: false,
        align: 'center',
        columnBtn: false,
        menu: false,
        column: [
          {
            label: "材料名称",
            prop: "materialname",
            align: 'left',
          },
          {
            label: "材料类型",
            prop: "materialtype",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "材料形式",
            prop: "materialformat",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_format",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          }, {
            label: "材料必要性",
            prop: "isneed",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=is_need",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          }
        ]

      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      data: [],
      query: {}
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  props: {
    serviceItemOneHistory:{}
  },
  created(){
    this.filterPlaceholder();
    this.initData();
  },
  methods: {
    rowStyle({ row }) {
      debugger
      if (row.addNum == 0 && row.doneNum == 0) {
        return "row-color";
      }
    },
  banbengh(row){
      debugger
      this.obj2 =row
      for (let i in this.obj2) {
        if (this.obj2[i] != this.obj[i]) {
          let arr = this.option2.group[0].column
          let brr = this.option.group[0].column
          arr.forEach((item,index)=>{
            if(item.prop == i){
              item.className = 'formClassName'
            }
          })
          brr.forEach((val,index)=>{
            if(val.prop == i){
              val.className = 'formClassName'
            }
          })
        }
      }

    //   this.findObject(this.option2.group[0].column,'catalogcode').className='formClassName'
      // var prop = this.findObject(this.option2.group[0].column,'catalogcode');
      // console.log(prop)
    },
    initData(){
      this.obj = this.serviceItemOneHistory.row;
      this.banbenghao=this.serviceItemOneHistory.records
      this.obj2=this.serviceItemOneHistory.records[0]
      for (let i in this.obj2) {
        if (this.obj2[i] != this.obj[i]) {
          let arr = this.option2.group[0].column
          let brr = this.option.group[0].column
          arr.forEach((item, index) => {
            if (item.prop == i) {
              item.className = 'formClassName'
            }
          })
          brr.forEach((val, index) => {
            if (val.prop == i) {
              val.className = 'formClassName'
            }
          })
        }
      }
    },
    onLoad(page, params = {}) {
      this.loading = true;
      params.taskcode = this.serviceItemOneHistory.row.taskcode;
      params.tasktype = this.serviceItemOneHistory.row.tasktype;
      params.taskguid = this.serviceItemOneHistory.row.rowguid;
      materialHistoryPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    filterPlaceholder(){
      this.option.group.forEach(g => {
        g.column.forEach(c =>{
          c.placeholder = false;
        })
      })
    }
  },
  watch: {}
};
</script>
<style scoped lang="scss">
/deep/.avue-crud__menu {
  min-height: 0px;
}
/deep/.formClassName{
  background-color: #3cd187 !important;
  padding-top: 12px !important;
}
///deep/.el-input.is-disabled .el-input__inner {
//    background-color: #FFF;
//    color: #606266;
//}
///deep/.el-textarea.is-disabled .el-textarea__inner {
//    background-color: #FFF;
//    color: #606266;
//}
</style>
